<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用NodeList</title>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
  </body>
  <script>
    /**1.理解 NodeList 对象和相关的 NamedNodeMap、HTMLCollection，是理解 DOM 编程的关键。这 3 个集合类型都是“实时的”，意味着文档结构的变化会实时地在它
     *   们身上反映出来，因此它们的值始终代表最新的状态。实际上，NodeList 就是基于 DOM 文档的实时查询。
     * 2.一般来说，最好限制操作 NodeList 的次数。因为每次查询都会搜索整个文档，所以最好把查询到的 NodeList 缓存起来
     */
    //无线循环的 NodeList
    function checkedTraverseNodeList1() {
      // divs为NodeList类型，其内容会实时刷新，采用此方式将导致无限循环，因为i永远小于divs.length
      // let divs = document.getElementsByTagName("div");
      // for (let i = 0; i < divs.length; ++i) {
      //   let div = document.createElement("div");
      //   document.body.appendChild(div);
      //   console.log('--finished--');
      // }
      let divs = document.getElementsByTagName("div");
      for (let i = 0, len = divs.length; i < len; ++i) {
        let div = document.createElement("div");
        div.appendChild(document.createTextNode('div'+i));
        document.body.appendChild(div);
      }
    }
    checkedTraverseNodeList1();
  </script>
</html>
